<template>
  <div class="Wxxjx">
    <!-- 第一行 -->
    <el-row>
      <el-col class="header_col">
        <div class="header_title">维修线绩效</div>
        <!--  <div class="header_dateTime">
          <div>
            <span class="header_dateTime_title">开始时间</span>
            <el-date-picker
              v-model="startData"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <div>
            <span class="header_dateTime_title">结束时间</span>
            <el-date-picker
              v-model="overData"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </div> -->
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <div ref="main" id="main"></div>
    <!-- <div ref="main2" id="main2"></div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data: function () {
    return {
      startData: "",
      overData: "",
      deptName: [],
      repairNums: [],
    };
  },

  methods: {
    getWxxjxData: function () {
      var myChart = echarts.init(this.$refs.main);
      this.$axios({
        url: "/repairLineAchievement/list",
        method: "get",
      }).then((res) => {
        if (res.data.code == "0") {
          let chartData = res.data.data;
          // console.log(data)
          for (let i = 0; i < chartData.length; i++) {
            this.deptName.push(chartData[i].deptName);
            this.repairNums.push(chartData[i].repairNums);
          }
          this.xAxis = [...this.deptName];
          this.series = [...this.repairNums];
          // 图表数据
          let data = {
            // color: ["#c23531", "#2f4554", "#61a0a8"],
            title: [
              {
                text: "部门维修量统计",
                x: "center",
                textStyle: {
                  fontSize: 18,
                  fontWeight: "bolder",
                  color: "#333", // 主标题文字颜色
                },
              },
              {
                subtext: "部门维修单量(单)",
                x: "left",
                top: "0",
                left: "120",
                subtextStyle: {
                  fontSize: 15,
                  fontWeight: "bolder",
                  color: "#aaa", // 副标题文字颜色
                },
              },
            ],
            tooltip: {
              trigger: "item",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              left: "9%",
              right: "9%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                data: this.xAxis,
                // data:[],
                axisTick: {
                  alignWithLabel: true,
                },
              },
            ],
            yAxis: [
              {
                type: "value",
              },
            ],
            series: [
              {
                name: "数据",
                type: "bar",
                barWidth: "8%",
                data: this.series,
                itemStyle: {
                  normal: {
                    //这里是重点
                    color: function (params) {
                      //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                      var colorList = [
                        "#5fa4e2",
                        "#ffc6c0",
                        "#64c8bc",
                        "#6554c0",
                      ];
                      return colorList[params.dataIndex];
                    },
                  },
                },
              },
            ],
          };
          myChart.setOption(data);
          // this.$message.success("数据加载成功！");
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
  },
  mounted: function () {
    this.getWxxjxData();
  },
};
</script>

<style lang="less" scoped>
// 图表二数据
// var myChart2 = echarts.init(this.$refs.main2);
/*  let data2 = {
      // color: ["#c23531", "#2f4554", "#61a0a8"],
      title: [
        {
          text: "人均维修时长统计",
          x: "center",
          textStyle: {
            fontSize: 18,
            fontWeight: "bolder",
            color: "#333", // 主标题文字颜色
          },
        },
        {
          subtext: "人均维修时长(小时)",
          x: "left",
          top: "0",
          left: "120",
          subtextStyle: {
            fontSize: 15,
            fontWeight: "bolder",
            color: "#aaa", // 副标题文字颜色
          },
        },
      ],
      tooltip: {
        trigger: "item",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "9%",
        right: "14%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["维修1线", "维修2线", "维修3线", "维修4线"],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          barWidth: "5%",
          data: [192, 168, 138, 212],
          itemStyle: {
            normal: {
              //这里是重点
              color: function (params) {
                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                var colorList = ["#5fa4e2", "#ffc6c0", "#64c8bc", "#6554c0"];
                return colorList[params.dataIndex];
              },
            },
          },
        },
      ],
    }; */
// myChart2.setOption(data2);
.Wxxjx {
  width: 100%;
  height: 100%;
  // background-color: yellow;
  // highCharts图表
  .highcharts-container {
    width: auto;
    height: 400px;
    border: 1px solid #ddd;
    margin: auto;
  }

  .header_col {
    height: 45px;
    margin-top: 20px;
    padding-left: 30px;
    min-width: 1440px;
    display: flex;
  }

  .header_title {
    height: 40px;
    width: 30%;
    // background-color: yellow;
    font-size: 24px;
    line-height: 40px;
    color: #344563;
    font-weight: bolder;
  }
  .header_dateTime {
    height: 40px;
    width: 70%;
    // background-color: red;
    font-size: 16px;
    line-height: 40px;
    color: #344563;
    // font-weight: bolder;
    display: flex;

    & div {
      margin-right: 50px;

      & .header_dateTime_title {
        margin-right: 20px;
      }
    }
  }
  // 图表

  #main {
    margin-top: 100px;
    min-width: 400px;
    height: 600px;
    margin-bottom: 50px;
  }
  #main2 {
    min-width: 400px;
    height: 300px;
  }
}
</style>